<template>
  <scroll-view class="album_box" scroll-y @scrolltolower="bandleLower">
    <!-- 轮播图 -->
    <swiper class="swiper_box" indicator-dots autoplay circular>
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image :src="item.thumb" mode="widthFix" />
      </swiper-item>
    </swiper>
    <!-- 专辑列表 -->
    <view class="album_list">
      <navigator class="listBox" v-for="(item, index) in albumList" :key="index" :url="`../albumDetails/albumDetails?id=${item.id}`">
        <!-- 左侧图片 -->
        <view class="leftImage">
          <image :src="item.cover" mode="aspectFill"/>
        </view>
        <view class="rightText">
          <view class="textBox">
            <view class="text1">{{ item.name }}</view>
            <view class="text2">{{ item.desc }}</view>
          </view>
          <view class="guanzhu">
            <view> + 关注 </view>
          </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
export default {
  mounted() {
    uni.setNavigationBarTitle({
      title: "专辑",
    });
    this.getList();
  },
  data() {
    return {
      parmas: {
        limit: 30,
        skip: 0,
        order: "new",
      },
      swiperList: [],
      albumList: [],
      isMore: true,
    };
  },

  methods: {
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.parmas,
      }).then((res) => {
        console.log(res);
        this.swiperList = res.data.res.banner;
        this.albumList = [...this.albumList, ...res.data.res.album];
        console.log(this.swiperList, this.albumList);
        if (res.data.res.album.length === 0) {
          this.isMore = false;
          uni.showToast({
            title: "没有更多了",
            icon: "none",
          });
          return;
        }
      });
    },
    bandleLower() {
      
      if (this.isMore) {
        this.parmas.skip += this.parmas.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scope>
//专辑样式最外层
.album_box {
  height: calc(100vh - 46px);
  //轮播图样式
  .swiper_box {
    height: calc(750rpx / 2.3);
    swiper-item {
      height: 100%;
      image {
        height: 100%;
      }
    }
  }
  //专辑列表
  .album_list {
    padding: 20rpx 10rpx;
    .listBox {
      display: flex;
      padding: 10rpx;
      border-bottom: 2px solid #f6f6f6;
      .leftImage {
        flex: 1;
        image {
          width: 110px;
          height: 100px;
        }
      }
      .rightText {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10rpx;
        overflow: hidden;
        .textBox {
          .text1 {
            color: black;
            font-size: 16px;
          }
          .text2 {
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-top: 10rpx;
          }
        }
        .guanzhu {
          display: flex;
          justify-content: flex-end;
          color: #d73c88;
          view {
            border: 2px solid #d73c88;
            padding: 5rpx 10rpx;
          }
        }
      }
    }
  }
}
</style>
